<template>
  <div class="user-profile-container">
    <el-card class="user-profile-card">
      <div class="user-info">
        <el-avatar :size="100">{{ userStore?.userName }}</el-avatar>
        <div class="user-details">
          <h2>{{ userStore?.userName }}</h2>
          <p>角色: {{ userStore?.isAdm ? '管理员' : '普通用户' }}</p>
          <p>用户ID: {{ userStore?.userId }}</p>
        </div>
      </div>
      <el-divider />
      <h3>修改密码</h3>
      <ChangePwd :userid="userStore.userId!" />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import ChangePwd from '@/components/ChangePwd.vue'

const userStore = useUserStore()
</script>

<style scoped>
.user-profile-container {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.user-profile-card {
  width: 600px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.user-details h2 {
  margin: 0 0 10px 0;
}

.user-details p {
  margin: 5px 0;
  color: #666;
}

.user-switcher {
  margin: 20px 0;
  display: flex;
  align-items: center;
}
</style>
